<template>
    <div class="wf-create flex flex-col">
        <a-card class="flex-1 card-group">
            <a-collapse v-model:activeKey="state.activeTab" v-if="state.tableData.length > 0">
                <a-collapse-panel 
                    v-for="(group,index) in state.tableData"
                    :key="index" 
                    :header="group.name"
                >
                    <common-table
                        :columns="columns"
                        :data="group.formList"
                        :loading="false"
                    >
                        <template #bodyCell="{ column, text, record }">
                            <template v-if="column.key === 'memo'">
                                <template v-if="record.memo">
                                    {{record.memo}}
                                </template>
                                <template v-else>
                                    <a-tag color="blue">空空如也~</a-tag>
                                </template>
                            </template>
                            <template v-else-if="column.key == 'opt'">
                                <div>
                                    <a-button class="mr-2" type="primary" @click="createIns(record)">
                                        发起
                                    </a-button>
                                </div>
                            </template>
                            <template v-else-if="column.key == 'status'">
                                <a-tag color="green" v-if="record.status == 1">启用</a-tag>
                                <a-tag color="red" v-else>禁用</a-tag>
                            </template>
                        </template>
                    </common-table>
                </a-collapse-panel>
            </a-collapse>
            <a-empty  v-else/>
        </a-card>
    </div> 
</template>


<script setup lang="ts" name="wfCreate">
import {onBeforeMount, onMounted, reactive} from 'vue'
import type { apiGetGroupWfFlowFormListType } from '../flowSetting/types';
import { apiDeleteFlowGroupPost, apiGetGroupWfFlowFormList } from '@/api/flow/wfGroup';
import type { ResType } from '@/api/types';
import commonTable from '@/components/common-table/index.vue'
import { useRouter } from 'vue-router';
import { showMsg } from '@/utils';
defineOptions({
    name:"wfCreate",
})

const router = useRouter()

const state = reactive({
    activeTab:0,
    tableData:[] as apiGetGroupWfFlowFormListType[]
})

const columns :any[]= [
    {
        title: '表单名称',
        dataIndex: 'formName',
        key: 'formName',
        align: 'center',
    }, 
    {
        title: '备注',
        dataIndex: 'memo',
        key: 'memo',
        align: 'center',
    },
    {
        title: '启用',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
    },
    {
        title:"操作",
        dataIndex:"opt",
        key:"opt",
        align:'center'
    }
]

const handleQuery = async ()=>{
    const res = await apiGetGroupWfFlowFormList() as ResType<apiGetGroupWfFlowFormListType[]>
    state.tableData = res.data.result
}

const createIns = (item:apiGetGroupWfFlowFormListType)=>{
    router.push(`/flow/form/${item.id}`)
}

onBeforeMount(async()=>{
    await handleQuery()
})
</script>

<style lang="scss" scoped>
.wf-create{
    :deep(.ant-card-body){
        height: 100%;
    }
    .card-group{
        height:100%;
        overflow: hidden;
        overflow-y: auto;
        scrollbar-gutter: stable;
        &::-webkit-scrollbar {
            width: 6px;
            background: transparent;
            opacity: 0;
            transition: opacity 0.3s;
        }

        &:hover::-webkit-scrollbar {
            opacity: 1;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
            border-radius: 4px;
        }

        &::-webkit-scrollbar-corner,
        &::-webkit-scrollbar-track {
            background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        &:hover::-webkit-scrollbar-thumb {
            background-color: #a19e9e;

            &:hover {
                background-color: #ccc;
            }
        }
    }
}
</style>